/*
* Requires: jquery
*/

jQuery(document).ready( ($) => {

  $('<div id="cursor"><div class="cursor__circle"></div></div>').appendTo('body')

  const cursor = document.querySelector('#cursor')
  const cursorCircle = cursor.querySelector('.cursor__circle')
  const allowedIn = document.querySelectorAll('.cursor--allow')
  const mouse = { x: -100, y: -100 }; 
  const pos = { x: 0, y: 0 }; 
  const speed = 0.09; 

  const updateCoordinates = e => { mouse.x = e.clientX, mouse.y = e.clientY }
  for ( let i = 0; i < allowedIn.length; i++ ) { allowedIn[i].addEventListener('mousemove', updateCoordinates) }

  function getAngle(diffX, diffY) { return Math.atan2(diffY, diffX) * 180 / Math.PI }

  function getSqueeze(diffX, diffY) {
    const distance = Math.sqrt( Math.pow(diffX, 2) + Math.pow(diffY, 2) )
    const maxSqueeze = 0.1125
    const accelerator = 1500
    return Math.min(distance / accelerator, maxSqueeze) 
  }

  const updateCursor = () => {
    const diffX = Math.round(mouse.x - pos.x);
    const diffY = Math.round(mouse.y - pos.y);
    pos.x += diffX * speed;
    pos.y += diffY * speed;
    const angle = getAngle(diffX, diffY);
    const squeeze = getSqueeze(diffX, diffY);
    const scale = 'scale(' + (1 + squeeze) + ', ' + (1 - squeeze) +')';
    const rotate = 'rotate(' + angle +'deg)';
    const translate = 'translate3d(' + pos.x + 'px ,' + pos.y + 'px, 0)';
    cursor.style.transform = translate;
    cursorCircle.style.transform = rotate + scale;
  };

  function loop() { updateCursor(); requestAnimationFrame(loop) }
  requestAnimationFrame(loop);

  allowedIn.forEach(cursorMods => {
    cursorMods.addEventListener('mouseenter', () => cursor.classList.add('cursor--allowed') )
    cursorMods.addEventListener('mouseleave', () => cursor.classList.remove('cursor--allowed') )
  })
  
})